<template>
    <div>
        <div><i class="el-icon-star-on"></i>基础信息</div>
        <div class="flex">
            <!-- <div class="imgbox mt20">
                <img :src="ListData.headImg | formatImg" alt="">
            </div> -->
            <div class="flex3">
                <r-list :ColsNum="3" :width="120" :ListCols="ListCols" ListType="Info" :ListData="ListData"></r-list>
            </div>
        </div>
        <div class="flex_aj sb mt60 mb20">
            <div class="pw40 ">
                <div class="mtb20 "><i class="el-icon-star-on"></i>设备信息</div>
                <r-table :tableData="tableDataShebei" :tableCols="tableColsShebei" :height="tableDataShebei.length*107+45"></r-table>
            </div>
            <div class="pw40">
                <div class="mtb20"><i class="el-icon-star-on"></i>工单信息</div>
                <r-table :tableData="tableDataGongdan" :tableCols="tableColsGongdan" :height="tableDataGongdan.length*107+45"></r-table>
            </div>
        </div>
        <div><i class="el-icon-star-on mt60 mb20"></i>工单列表</div>
        <ListWork />
        <div><i class="el-icon-star-on mt60 mb20"></i>激活信息</div>
        <ListFocus />
    </div>
</template>
<script>
import ListWork from './ListWork.vue'
import ListFocus from './ListFocus.vue'
export default {
    data() {
        return {
            //基础信息
            ListCols: [
                [
                    // {
                    //     label: 'headimg',
                    //     prop: 'headimg',
                    //     hiddenHead: true
                    // },
                    {
                        label: '运维员名称',
                        prop: 'name',
                    },
                    {
                        label: '登录账号',
                        prop: 'account',
                    },
                    {
                        label: '联系方式',
                        prop: 'phone',
                    },
                    {
                        label: '账号状态',
                        prop: 'state',
                        formatter: e => e.state == 1 ? '启用' : e.state == 2 ? '禁用' : ''
                    },
                    {
                        label: '创建时间',
                        prop: 'createdTime',
                    },
                ]
            ],
            ListData: {
            },
            //费用信息数据
            ListDataFeiyong: {
                total: '123',
                discount: '123',
                payPrice: '123',
                returnPrice: '',
                returnTime: '123',
            },
            //费用信息
            ListColsFeiyong: [
                [
                    {
                        label: '商品合计',
                        prop: 'total'
                        // theme: e => e.status ? 'primary' : 'danger', type: "tag",
                    },
                    {
                        label: '优惠金额',
                        prop: 'discount'
                    },
                    {
                        label: '应付款金额',
                        prop: 'payPrice'
                    },
                    {
                        label: '退款金额',
                        prop: 'returnPrice',
                        type: 'button',
                        btnList: [
                            {
                                label: '退款',
                                type: 'primary',
                                handle: e => this.showFrom(),
                                isShow: false
                            },
                        ]
                    },
                    {
                        label: '退款时间',
                        prop: 'returnTime'
                    },
                ]
            ],
            //订单分成利润
            ListDataFencheng: {
                total: '123',
                costTotal: '123',
                orderProfit: '123',
                scalePrice: '123',
                operationProfit: '123',
                agentProfit: '123',
                sallerProfit: '123',
            },
            //订单分成利润信息
            ListColsFencheng: [
                [
                    {
                        label: '商品合计',
                        prop: 'total'
                        // theme: e => e.status ? 'primary' : 'danger', type: "tag",
                    },
                    {
                        label: '商品成本合计',
                        prop: 'costTotal'
                    },
                    {
                        label: '订单利润',
                        prop: 'orderProfit'
                    },
                    {
                        label: '分成金额',
                        prop: 'scalePrice'
                    },
                    {
                        label: '运营商分成',
                        prop: 'operationProfit'
                    },
                    {
                        label: '代理商分成',
                        prop: 'agentProfit'
                    },
                    {
                        label: '商家分成',
                        prop: 'sallerProfit'
                    },
                    {
                        label: '-',
                        prop: ' '
                    },
                ]
            ],
            //订单售后数据
            ListDataShouhou: {
                content: '未收到',
                servePic: ['http://photo.16pic.com/00/01/11/16pic_111395_b.jpg', 'http://photo.16pic.com/00/86/85/16pic_8685056_b.jpg'],
                cTime: '2020-02-02',
                serveStatus: '未处理',
                handleResult: '审核通过',
                handleTime: '2020-02-02',
            },
            //订单售后信息
            ListColsShouhou: [
                [
                    {
                        label: '反馈内容',
                        prop: 'content'
                        // theme: e => e.status ? 'primary' : 'danger', type: "tag",
                    },
                    {
                        label: '售后图片',
                        prop: 'servePic',
                        type: 'img',
                        imglook: true
                    },
                    {
                        label: '申请时间',
                        prop: 'cTime'
                    },
                    {
                        label: '处理状态',
                        prop: 'serveStatus'
                    },
                    {
                        label: '处理结果',
                        prop: 'handleResult',
                        type: 'button',
                        btnList: [
                            {
                                label: '处理',
                                type: 'primary',
                                handle: e => this.showFrom(),
                                isShow: false
                            },
                        ]
                    },
                    {
                        label: '处理时间',
                        prop: 'handleTime'
                    },
                ]
            ],
            //称波动记录数据
            tableDataBodong: [
                {
                    doorId: '123',
                    weighId: '123',
                    goodsName: '123',
                    goodsType: '123',
                    weighChange: '123',
                    cTime: '123',
                },
            ],
            //称波动记录信息
            tableColsBodong: [
                {
                    label: '门编号',
                    prop: 'doorId',
                },
                {
                    label: '称编号',
                    prop: 'weighId'
                },
                {
                    label: '商品名称',
                    prop: 'goodsName'
                },
                {
                    label: '重量变化(g)',
                    prop: 'weighChange'
                },
                {
                    label: '创建时间',
                    prop: 'cTime'
                },
            ],
            // 设备数据
            tableDataShebei: [
                {
                    deveceType: '123',
                    deviceNum: '123',
                },
            ],
            // 设备信息
            tableColsShebei: [
                {
                    label: '设备类型',
                    prop: 'deveceType',
                },
                {
                    label: '设备数量',
                    prop: 'deviceNum'
                },
            ],
            // 工单数据
            tableDataGongdan: [

            ],
            // 工单信息
            tableColsGongdan: [
                {
                    label: '工单状态',
                    prop: 'wordOrder',
                },
                {
                    label: '数量',
                    prop: 'orderNum'
                },
            ],
            //合计栏
            formData: {
                orderPrice: "",
                returnPrice: ''
            },
            formCols: [
                { type: 'readonly', label: "订单支付金额", width: 350, prop: "orderPrice" },
                { type: 'input', label: "退款金额", width: 350, prop: "returnPrice" },
            ],
            formRules: {
                orderPrice: [
                    { required: false, message: '', trigger: 'blur' },
                ],
                returnPrice: [
                    { required: true, message: '请输入退款金额', trigger: 'blur' },
                ],
            },
            formHandle: [
                {
                    label: "取消",
                    handle: e => this.elFormVisible(),
                },
                {
                    label: "确定",
                    type: "success",
                    handle: e => this.elFormSubmit(),
                },

            ],

        };
    },
    components: {
        ListWork,
        ListFocus,
    },
    computed: {},
    mounted() {
        this.init()
    },
    methods: {
        async init() {
            let res = await this.api.getopinfo(
                this.$route.query.id
            )
            if (res) {
                this.ListData = res.data.opEntity
                this.tableDataShebei = [
                    {
                        deveceType: '自提柜',
                        deviceNum: res.data.opEntity.ebNum
                    },
                    {
                        deveceType: '组合柜',
                        deviceNum: res.data.opEntity.cbNum
                    },
                    {
                        deveceType: '生鲜柜',
                        deviceNum: res.data.opEntity.eqNum
                    },
                ]
                // console.log(this.ListData);
                this.tableDataGongdan = [
                    {
                        wordOrder: '已处理',
                        orderNum: res.data.handleNums,
                    },
                    {
                        wordOrder: '总订单数',
                        orderNum: res.data.totalNums,
                    },
                    {
                        wordOrder: '未处理',
                        orderNum: res.data.unHandleNums,
                    },
                ]
            }
            let res2 = await this.api.errlist({ optorId: this.ListData.id })
        },
        showFrom() {
            this.$prompt(`请输入退款金额(支付金额:${this.ListData.payMoney})`, '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                // inputPattern: /[\w!#$%&'*+/=?^_`{|}~-]+(?:\.[\w!#$%&'*+/=?^_`{|}~-]+)*@(?:[\w](?:[\w-]*[\w])?\.)+[\w](?:[\w-]*[\w])?/,
                inputErrorMessage: '邮箱格式不正确'
            }).then(({ value }) => {
                this.$message({
                    type: 'success',
                    message: '退款成功'
                });
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '取消输入'
                });
            });

        }

    }
};
</script>
<style scoped lang='scss'>
.pw40 {
  width: 45%;
}
.imgbox {
  border: 1px solid #ebeef5;
  border-right: none;
  flex: 1;
  padding: 0 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 300px;
  img {
    width: 200px;
    height: 200px;
  }
}
</style>